<template>
	<view class="dashboard-container">
		<view class="header-class tn-flex justify-start">
			<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
			<tn-navbar fixed back-text="返回">采购情况</tn-navbar>
		</view>

		<view class="tn-p tn-white_bg">
			<!-- <view class="tabs-container tn-flex">
				<view class="tab-item" :class="{ 'active': activeTab === 'business' }" @click="activeTab = 'business'">业务情况</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'finance' }" @click="activeTab = 'finance'">财务情况</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'inventory' }" @click="activeTab = 'inventory'">库存情况</view>
			</view> -->

			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator"></view>
					采购业务
				</view>

				<view class="cards-grid">
					<view class="card-item">
						<text class="card-title">预付未入库</text>
						<text class="card-value">10万</text>
					</view>
					<view class="card-item">
						<text class="card-title">采退未结算</text>
						<text class="card-value">5万</text>
					</view>
					<view class="card-item">
						<text class="card-title">入库无发票</text>
						<text class="card-value">20万</text>
					</view>
					<view class="card-item">
						<text class="card-title">销退>30天未处理</text>
						<text class="card-value">6万</text>
					</view>
					<view class="card-item">
						<text class="card-title">销退未收货单数</text>
						<text class="card-value">100</text>
					</view>
					<view class="card-item">
						<text class="card-title">本年退货率</text>
						<text class="card-value">4%</text>
					</view>
				</view>
			</view>

			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
                    <view class="indicator"></view>
                    预付未入库
                </view>
				<view class="chart-container tn-flex tn-flex-center">
					<view class="donut-chart" style="background: conic-gradient(#4CAF50 53.87%, #2196F3 53.87% 80.94%, #03A9F4 80.94% 100%);">
						<view class="inner-circle"></view>
					</view>
					<view class="chart-legend">
						<view class="legend-item"><span class="legend-color" style="background-color: #4CAF50;"></span>等级C 2万 20%</view>
						<view class="legend-item"><span class="legend-color" style="background-color: #2196F3;"></span>等级A 6万 60%</view>
						<view class="legend-item"><span class="legend-color" style="background-color: #03A9F4;"></span>等级B 2万 20%</view>
					</view>
				</view>
			</view>

			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
                    <view class="indicator"></view>
                    退货率
                </view>
				<view class="chart-container tn-flex tn-flex-center">
					<view class="donut-chart" style="background: conic-gradient(#4CAF50 6%, #00BCD4 6% 100%);">
						<view class="inner-circle"></view>
					</view>
					<view class="chart-legend">
						<view class="legend-item"><span class="legend-color" style="background-color: #4CAF50;"></span>电商部 20单 20%</view>
						<view class="legend-item"><span class="legend-color" style="background-color: #00BCD4;"></span>终端部 80单 80%</view>
					</view>
				</view>
			</view>

			

		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const activeTab = ref('business')
	const activeSubTab = ref('dianShangB')
</script>

<style scoped>
	.dashboard-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header-class {
		background-color: #fff;
		height: 45px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #435A88; /* Match navbar color */
	}

	.tabs-container {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		padding-bottom: 10px;
		margin-top: -10px; /* Adjust to align with top padding */
		position: sticky; /* Make tabs sticky below header */
		top: 45px; /* Adjust based on navbar height */
		z-index: 10; /* Ensure tabs are above other content */
	}

	.tab-item {
		padding: 10px 0;
		font-size: 16px;
		color: #666;
		position: relative;
		cursor: pointer;
		flex: 1;
		text-align: center;
	}

	.tab-item.active {
		color: #435A88;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 3px;
		background-color: #435A88;
		border-radius: 2px;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		padding-left: 10px;
		padding-top: 10px; /* Add some top padding for spacing after tabs */
	}

	.indicator {
		width: 5px;
		height: 20px;
		background-color: #4CAF50; /* Changed to green */
		margin-right: 10px;
		border-radius: 2px;
	}

	.cards-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 0 10px;
	}

	.card-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 80px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 14px;
		color: #999;
		margin-bottom: 5px;
	}

	.card-value {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.chart-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
		background-color: #fff;
		border-radius: 8px;
		margin: 0 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.donut-chart {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20px;
	}

	.donut-chart .inner-circle {
		width: 80px;
		height: 80px;
		background-color: #fff;
		border-radius: 50%;
	}

	.chart-legend {
		font-size: 14px;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.legend-color {
		width: 12px;
		height: 12px;
		border-radius: 3px;
		margin-right: 8px;
	}

	.tabs-sub-container {
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid #eee;
		margin-bottom: 15px;
		padding-left: 10px;
	}

	.tabs-sub-container .tab-item {
		flex: unset;
		padding: 8px 15px;
		font-size: 14px;
	}

	.tabs-sub-container .tab-item.active::after {
		width: 30px;
	}

	.line-chart-container {
		background-color: #fff;
		border-radius: 8px;
		margin: 0 10px;
		padding: 20px 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		overflow-x: auto; /* Allow horizontal scrolling for the chart */
	}

	.line-chart-mock {
		display: flex;
		align-items: flex-end;
		height: 200px; /* Chart height */
		position: relative;
		width: 120%; /* Give more width for horizontal scrolling */
		min-width: 600px; /* Ensure chart is wide enough */
	}

	.y-axis {
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		height: 100%;
		padding-right: 10px;
		font-size: 12px;
		color: #999;
		text-align: right;
		border-right: 1px solid #eee;
		flex-shrink: 0; /* Prevent shrinking */
	}

	.chart-area {
		flex-grow: 1;
		position: relative;
		height: 100%;
		width: 100%; /* Take full width of parent */
	}

	.line-mock {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100%; /* Represents chart area */
		/* Background gradient and SVG masks adjusted to better resemble the image */
		opacity: 0.7;
	}

	.line-blue {
		background: linear-gradient(to top, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.5) 50%, rgba(33, 150, 243, 0.8) 100%); /* Blue gradient for "预付未入库" */
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"><path fill="none" stroke="blue" stroke-width="2" d="M0,130 C50,60 100,160 150,90 C200,30 250,140 300,70 C350,10 400,120 450,50 C500,0 550,100 600,60" /></svg>') no-repeat center center / 100% 100%;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"><path fill="none" stroke="blue" stroke-width="2" d="M0,130 C50,60 100,160 150,90 C200,30 250,140 300,70 C350,10 400,120 450,50 C500,0 550,100 600,60" /></svg>') no-repeat center center / 100% 100%;
	}

	.line-green {
		background: linear-gradient(to top, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.5) 50%, rgba(76, 175, 80, 0.8) 100%); /* Green gradient for "采退未结算" */
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"><path fill="none" stroke="green" stroke-width="2" d="M0,150 C50,100 100,180 150,120 C200,70 250,150 300,100 C350,50 400,130 450,80 C500,30 550,110 600,70" /></svg>') no-repeat center center / 100% 100%;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"><path fill="none" stroke="green" stroke-width="2" d="M0,150 C50,100 100,180 150,120 C200,70 250,150 300,100 C350,50 400,130 450,80 C500,30 550,110 600,70" /></svg>') no-repeat center center / 100% 100%;
	}

	.x-axis {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 12px;
		color: #999;
		padding-top: 10px;
		border-top: 1px solid #eee;
		flex-shrink: 0; /* Prevent shrinking */
	}

	.line-chart-legend {
		display: flex;
		justify-content: center;
		margin-top: 15px;
		font-size: 14px;
	}
</style> 